<template>
  <div class="hometype">
    <van-swipe indicator-color="orange">
      <van-swipe-item>
        <!-- {{one}} -->
        <ul>
          <li v-for="(v) in one" :key="v.tyid" @click="shopstore(v.tyname)">
            <img :src="v.img" alt />
            <span>{{v.tyname}}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul>
          <li v-for="(v) in two" :key="v.tyid" @click="shopstore(v.tyname)">
            <img :src="v.img" alt />
            <span>{{v.tyname}}</span>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul>
          <li v-for="(v) in three" :key="v.tyid" @click="shopstore(v.tyname)">
            <img :src="v.img" alt />
            <span>{{v.tyname}}</span>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
    <div class="quan">
      <img src="cheyi/homeimages/quan/q_02.gif" alt />
    </div>
  </div>
</template>

<script>
// import axios from "axios";
// import { hometype } from "@/api/cheyi.js";
import router from "../../../router";
import { Toast } from "vant";
export default {
  data() {
    return {
      // arr:[]
      arr: [
        {
          tyid: 1,
          tyname: "美食",
          img: "cheyi/homeimages/images/home-_02.gif"
        },
        {
          tyid: 2,
          tyname: "景点周边游",
          img: "cheyi/homeimages/images/home-_04.gif"
        },
        {
          tyid: 3,
          tyname: "酒店/民宿",
          img: "cheyi/homeimages/images/home-_06.gif"
        },
        {
          tyid: 4,
          tyname: "休闲/玩乐",
          img: "cheyi/homeimages/images/home-_08.gif"
        },
        {
          tyid: 5,
          tyname: "电影/演出",
          img: "cheyi/homeimages/images/home-_10.gif"
        },
        {
          tyid: 6,
          tyname: "洗浴/汗蒸",
          img: "cheyi/homeimages/images/home-_11.gif"
        },
        {
          tyid: 7,
          tyname: "拍照/写真",
          img: "cheyi/homeimages/images/home-_12.gif"
        },
        {
          tyid: 8,
          tyname: "鲜花",
          img: "cheyi/homeimages/images/home_20.gif"
        },
        {
          tyid: 9,
          tyname: "KTV",
          img: "cheyi/homeimages/images/home-_19.gif"
        },
        {
          tyid: 10,
          tyname: "亲子/乐园",
          img: "cheyi/homeimages/images/home-_22.gif"
        },
        {
          tyid: 11,
          tyname: "美团外卖",
          img: "cheyi/homeimages/home_03.gif"
        },
        {
          tyid: 12,
          tyname: "按摩/足疗",
          img: "cheyi/homeimages/home_07.gif"
        },
        {
          tyid: 13,
          tyname: "宠物",
          img: "cheyi/homeimages/home_09.gif"
        },
        {
          tyid: 14,
          tyname: "逛街/商场",
          img: "cheyi/homeimages/home_11.gif"
        },
        {
          tyid: 15,
          tyname: "跑腿",
          img: "cheyi/homeimages/home_15.gif"
        },
        {
          tyid: 16,
          tyname: "火车票/机票",
          img: "cheyi/homeimages/home_17.gif"
        },
        {
          tyid: 17,
          tyname: "美团打车",
          img: "cheyi/homeimages/home_19.gif"
        },
        {
          tyid: 18,
          tyname: "丽人/美发",
          img: "cheyi/homeimages/home_21.gif"
        },
        {
          tyid: 19,
          tyname: "医学美容",
          img: "cheyi/homeimages/home_23.gif"
        },
        {
          tyid: 20,
          tyname: "结婚/婚纱照",
          img: "cheyi/homeimages/home_24.gif"
        },
        {
          tyid: 21,
          tyname: "母婴服务",
          img: "cheyi/homeimages/home_30.gif"
        },
        {
          tyid: 22,
          tyname: "健身/运动",
          img: "cheyi/homeimages/home_31.gif"
        },
        {
          tyid: 23,
          tyname: "医疗/口腔",
          img: "cheyi/homeimages/home_32.gif"
        },
        {
          tyid: 24,
          tyname: "学习培训",
          img: "cheyi/homeimages/home_33.gif"
        },
        {
          tyid: 25,
          tyname: "家居/装修",
          img: "cheyi/homeimages/home_34.gif"
        },
        {
          tyid: 26,
          tyname: "生活服务",
          img: "cheyi/homeimages/home_40.gif"
        },
        {
          tyid: 27,
          tyname: "养车/用车",
          img: "cheyi/homeimages/home_41.gif"
        }
      ]
    };
  },
  computed: {
    one() {
      return this.arr.slice(0, 10);
    },
    two() {
      return this.arr.slice(10, 20);
    },
    three() {
      return this.arr.slice(20, 28);
    }
  },
  methods: {
    // 判断点的是哪个跳转到谁的页面
    shopstore(val) {
      switch (val) {
        case "美食":
          this.$router.push("/shoplist/ShopListE1");
          break;
        case "洗浴/汗蒸":
          this.$router.push("/erxiyu");
          break;
        case "鲜花":
          this.$router.push("/xianhua");
          break;
        case "宠物":
          this.$router.push("/petpage");
          break;
        case "景点周边游":
          this.$router.push("/allattractions");
          break;
        default:
          Toast("抱歉！还没有开拓哦，试试其他的");
      }
    }
  }
  // created() {
  //   // mock数据
  //   axios.request("http://localhost:8889/cyhometype").then(({ data }) => {
  //     // console.log(data);
  //     this.arr = data;
  //   });
  // }
};
</script>

<style lang="scss" scoped>
.hometype {
  width: 100%;
  text-align: center;
  font-size: 3.2vw;
  font-weight: 500;
  ul {
    width: 100%;
    height: 40vw;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    li {
      width: 20%;
      height: 20vw;
      position: relative;
      span {
        width: 100%;
        display: block;
        position: absolute;
        bottom: 0;
      }
      img {
        width: 80%;
      }
    }
  }
  .quan {
    width: 100%;
    height: 20vw;
    margin-bottom: 3.733vw;
    img {
      height: 20vw;
    }
  }
}
.van-swipe-item {
  width: 100%;
  height: 48vw;
}
</style>